<template>
  <div class="app-container add-page">

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="Particpact" name="Particpact" />
   
    </el-tabs>

    <!-- tab1 tab2 -->
    <div  class="container-fluid">
      <div class="filter-container" >
        <el-row align="bottom"  >
          <el-col :sm='12'>
            <div class="ul-input">
                <label for="">
                  State:
                </label>
            <el-select v-model="value" @change='sort_method'
        class="filter-item"  placeholder="请选择">
           <el-option
             v-for="item in options"
             :key="item.value"
             :label="item.label"
             :value="item.value">
           </el-option>
         </el-select>
         </div>
          </el-col>
      <el-col :sm='12'  style="text-align:right">
         <div class="ul-input">
                <label for="">
                  State:
                </label>
            <el-select v-model="value" @change='sort_method'
        class="filter-item"  placeholder="请选择">
           <el-option
             v-for="item in options"
             :key="item.value"
             :label="item.label"
             :value="item.value">
           </el-option>
         </el-select>
         </div>
          </el-col>
        </el-row>
      </div>

         <el-row>
           <el-col :sm="12">
        <h3>Coaches / Helpers</h3>
            <div class="ul-input">
              <el-input  class="filter-item"></el-input>
              <el-button type="success">Add</el-button>
            </div>
  
      <el-table
        ref="table"
        height=200
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        stripe
       @selection-change="handleSelectionChange"
        @sort-change="sort_change"
      >
      <el-table-column
       v-if="activeName==='Particpact'"
      type="selection"
      fixed="left"
      width="40">
    </el-table-column>
        <el-table-column fixed="left" label="Case ID" width="120" prop="id" sortable="custom">
          <template slot-scope="scope">
            <router-link tag="a" target="_blank" :to="`/trainSchedule/timeTable?page=${activeName}&id=${scope.row.id}&type=${scope.row.typeCode}&target=blank`">
              {{ scope.row.idPrefix }}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column label="Status" width="100" prop="status" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.status }}
          </template>
        </el-table-column>
        <el-table-column :label="'Date \n Published'" width="120" align="center" prop="publisheDate" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.publisheDate | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column :label="'Last Modified'" width="140" align="center" prop="lastMedified" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.lastMedified | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="Category" min-width="180" prop="category" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.category }}
          </template>
        </el-table-column>
        <el-table-column label="Sport" min-width="100"   prop="sportName" sortable="custom" >
          <template slot-scope="scope">
            {{ scope.row.sportName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="Athlete" min-width="100" prop="lastName" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.lastName }} {{ scope.row.firstName }}
          </template>
        </el-table-column>
        <el-table-column label="中文姓名" min-width="100" prop="tc" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.tc }}
          </template>
        </el-table-column>
        <el-table-column label="Person In Charge" min-width="160" prop="pic" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.pic || '-' }}
          </template>
        </el-table-column>
        <el-table-column :label="'Review \n Session'" width="120" align="center" prop="reviewSession" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.reviewSession | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="Short Report" min-width="120" prop="shortReport" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.shortReport || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="Creator" min-width="120" prop="createLastName" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.createLastName}} {{ scope.row.createFirstName}}
          </template>
        </el-table-column>
<!--        <el-table-column fixed="right" label="" width="60" :formatter="sportMedicineFormatLink">-->
<!--          <template slot-scope="scope">-->
<!--            <div style="text-align: center;">-->
<!--              <router-link tag="a" target="_blank" :to="`/trainSchedule/timeTable?page=${activeName}&id=${scope.row.id}&type=${scope.row.typeCode}&target=blank`">-->
<!--                <el-button type="text" size="small">-->
<!--                  <img src="../../assets/images/look.svg" class="btn-icon">-->
<!--                </el-button>-->
<!--              </router-link>-->
<!--            </div>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
      <!-- <el-pagination
        layout="sizes, prev, pager, next"
        :page-size="listQuery.limit"
        :current-page="listQuery.page"
        :total="listQuery.total"
        class="pagination-container"
        :page-sizes="[25, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      /> -->

      </el-table>
   </el-col>
   <!--  -->
      <el-col :sm="11" :offset="1">
              <h3>Athlete</h3>
            <div class="ul-input">
              <el-input  class="filter-item"></el-input>
              <el-button type="success">Add</el-button>
            </div>
             <el-table
             :show-header='false'
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="address"
        label=""
        
        >
      </el-table-column>
      <el-table-column
        prop="name"
        label=""
        width="80"
    
       >
       <template slot-scope="scope">
         <i class="el-icon-close closeSoild"></i>
       </template>
      </el-table-column>
     
    </el-table>
             
      </el-col>
         </el-row>
    </div>

  </div>
</template>
<script>
    import store from '@/store'
    import { getInterList } from '@/api/home'
    import { getMedicalList, getMedicalSSList, getSummaryList } from '@/api/trainSchedule'

    export default {
        filters: {
            statusFilter(status) {
                const statusMap = {
                    published: 'success',
                    draft: 'gray',
                    deleted: 'danger'
                }
                return statusMap[status]
            }
        },
        data() {
            return {
               nowDate:new Date(),
              pickerVal:'',
              tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
              options: [{
                       value: 'Sport',
                       label: 'Sport'
                     }, {
                       value: 'Particpact',
                       label: 'Particpact Name'
                     }, {
                       value: 'Particpact Details',
                       label: 'Particpact Details'
                     }],
                     value: 'Sport',
              pickerOptions: {
                      },
                      value1: '',
                      value2: '',

                sportMedicineList: {
                },
                list: [],
                listQuery: {
                    page: 1,
                    limit: 25,
                    total: 0,
                    sorting: '',
                    column: '',
                    startDate: '',
                    endDate: ''
                },
                sportScienceList: {
                    list: [],
                    listQuery: {
                        page: 1,
                        limit: 25
                    }
                },
        
                listLoading: true,
                activeName: 'Particpact',
                link: '/trainSchedule/add',
                summaryList: [],
                listIndexs: [],
                minWindths: [],
                userType: store.getters.userType
            }
        },
        watch: {
            activeName(val) {
                this.$router.push(`${this.$route.path}?tab=${val}`)
            }
        },
         computed:{        

         },
        mounted(e){
          console.log('compute',this,this.$refs)
          this.$refs.inputRef.pickerVisible = true
        },
        created() {
            const query = this.$route.query
            if (query.tab) {
                this.activeName = query.tab || 'Particpact'
            }
            this.fetchData()
        },
        methods: {
            fetchData() {
                const tabName = this.activeName
                this.listQuery.page = 1
                this.listQuery.total = 0
                this.listQuery.sorting = ''
                this.listQuery.column = ''
                if (this.$refs.table) this.$refs.table.clearSort()
                if (tabName === 'Particpact') {
                    this.link = '/trainSchedule/add?page=Particpact'
                    this.trainScheduleList(this.listQuery.page, tabName)
                } else if (tabName === 'TimeTable') {
                    this.link = '/trainSchedule/add?page=SportScience'
                    this.trainScheduleList(this.listQuery.page, tabName)
                } else if (tabName === 'Classification') {
                    this.link = '/trainSchedule/add?page=Classification'
                    this.trainScheduleList(this.listQuery.page, tabName)
                } else if (tabName === 'Medication') {
                    this.link = '/trainSchedule/add?page=Medication'
                    this.trainScheduleList(this.listQuery.page, tabName)
                } else {
                    this.link = '/trainSchedule/add?page=Particpact'
                    this.getSummaryList()
                    // this.listLoading = false
                }
            },
            trainScheduleList(page, tabName) {
                var that = this
                var url = '/medical/sport_medical/page_list'
                console.log(tabName)
                if (tabName === 'TimeTable') url = '/medical/sport_medical/page_list'
                if (tabName === 'Particpact') url = '/medical/sport_science/page_list'
                if (tabName === 'Classification') url = '/medical/classification/page_list'
                if (tabName === 'Medication') url = '/medical/medication/page_list'
                this.listLoading = true
                if (page === 1) {
                    this.list = []
                }
                getMedicalList(url, {
                    keyword: this.listQuery.keyword,
                    page: page,
                    size: this.listQuery.limit,
                    sorting: this.listQuery.sorting,
                    column: this.listQuery.column
                }).then(response => {
                    if (response.status === 0) {
                        const data = response.result
                        this.listQuery.total = data.total ? data.total : this.listQuery.total
                        for (var i in data.list) {
                          data.list[i].idPrefix = this.$caseIdFormat(tabName, data.list[i].id)
                        }
                        this.list = data.list
                        this.listQuery.page = page
                    }
                    that.listLoading = false
                })
            },
             sort_method(sm) {
                   this.listQuery.sorting = sm === 'Sport' ? 0 : 1;
                   this.listQuery.column = 'category'
                   this.trainScheduleList(1, this.activeName)
            },
            sort_change(column) {
                this.listQuery.page = 1
                if (column.prop && column.order) {
                    this.listQuery.sorting = column.order === 'ascending' ? 0 : 1
                    this.listQuery.column = column.prop
                    this.trainScheduleList(1, this.activeName)
                }
                // this.showed_data = this.filtered_data.slice(0, this.page_size) // show only one page
            },
            getSummaryList() {
                var that = this
                that.listLoading = true
                this.listIndexs = []
                getSummaryList({
                    start: this.listQuery.startDate,
                    end: this.listQuery.endDate
                }).then(response => {
                    if (response.status === 0) {
                        const data = response.result
                        // data[7][3] = 12
                        this.summaryList = data
                        for (var i in data[0]) {
                            if (i > 0) {
                                this.listIndexs.push({ name: data[0][i].replace(' ', '\n'), key: i })
                            }
                        }
                    }
                    that.listLoading = false
                })
            },
            minWidth(i, text) {
                let w = 100
                if (text.length >= 10) {
                     w = 130
                } else if (text.length < 5 && text !== '') {
                     w = 50
                } else {
                     w = 100
                }
                // const w = text.length >= 10 ? 130 : 100
                console.log(text, text.length)
                return w
            },
            // pageSize变化事件
            handleSizeChange(val) {
              this.listQuery.limit = val
              this.fetchData()
            },
            // pageNum变化事件
            handleCurrentChange(page) {
                this.trainScheduleList(page, this.activeName)
            },
            sportMedicineFormatLink(row, column) {
                return row.row.id = 1
            },
            forthSet(dateStr, pattern = '') {
                // 根据给定的时间字符串，得到特定的时间
                var dt = new Date(dateStr)
                //   yyyy-mm-dd
                var y = dt.getFullYear()
                var m = (dt.getMonth() + 1).toString().padStart(2, '0')
                var d = dt.getDate().toString().padStart(2, '0')
                if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                    return `${y}-${m}-${d}`
                } else {
                    var hh = dt.getHours().toString().padStart(2, '0')
                    var mm = dt.getMinutes().toString().padStart(2, '0')
                    var ss = dt.getSeconds().toString().padStart(2, '0')
                    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
                }
            },
            handleClick(tab, event) {
                this.listLoading = true
                this.fetchData()
                this.listQuery.keyword = ''
            },
            handleFilter() {
                this.fetchData()
            },
            change_time(e) {
              console.log('333', e)
              e.pickerVisible = true
            },
        toggleSelection(rows) {
        if (rows) {
            rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
        })
        } else {
            this.$refs.multipleTable.clearSelection();
        }
        },
        handleSelectionChange(val) {
          this.multipleSelection = val
        }
        }
    }
</script>
<style lang='scss' scope>
 .closeSoild{

     border-radius: 50%;
     display: bock;
     background: rgba(0,0,0,.5);
     padding:2px;
     color:#fff;
 }
</style>
